<template>
  <div>
    <div v-if="dialogVisible" class="countdown">
      <h3 v-if="type == 0">距离选课开始还有：</h3>
      <div class="countdown-content" v-if="type == 0">
        <span id="day">{{ this.day }}</span> 天
        <span id="hour">{{ this.hour }}</span> 小时
        <span id="minute">{{ this.minute }}</span> 分钟
        <span id="second">{{ this.second }}</span> 秒
        <span>{{ this.millisecond }}</span
        >毫秒
      </div>
      <button
        v-if="type == 0 || type == 1"
        @click="seletion"
        class="custom-btn btn-5"
      >
        <span>开始选课</span>
      </button>
      <h3 v-else>暂时无选课活动</h3>
    </div>

    <div v-else>
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="courseAndTeacherMsg.courseClassId"
          label="课程序号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="courseAndTeacherMsg.courseName"
          label="课程名称"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="courseAndTeacherMsg.classTime"
          label="课程安排"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="courseAndTeacherMsg.credit"
          label="学分"
          width="180"
        >
        </el-table-column>
        <el-table-column label="任课教师" width="180">
          <template slot-scope="scope">
            <el-link
              @click="teainfo(scope.row.courseAndTeacherMsg.teaInfoDTO)"
              type="primary"
              >{{ scope.row.courseAndTeacherMsg.teaInfoDTO.name }}</el-link
            >
          </template>
        </el-table-column>
        <!-- 已选人数 -->
        <el-table-column label="已选人数" width="180">
          <template slot-scope="scope">
            {{ scope.row.courseAndTeacherMsg.max - scope.row.remain }}/
            {{ scope.row.courseAndTeacherMsg.max }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              :loading="loading"
              v-if="scope.row.is_select"
              size="mini"
              @click="push(scope.row.randomCode)"
              type="primary"
              >选课<i class=" el-icon-s-claim"></i
            ></el-button>
            <el-button
              v-else
              size="mini"
              @click="tui(scope.row.randomCode)"
              type="info"
              >退课<i class=" el-icon-error"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="教师详细信息" :visible.sync="dialogVisible" width="30%">
        <el-descriptions
          v-if="dialogVisible"
          class="margin-top"
          :column="3"
          :size="size"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              照片
            </template>
            <el-image
              style="width: 100px; height: 100px"
              :src="teaInfo.photo"
              fit="fit"
            ></el-image>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              教师姓名
            </template>
            {{ this.teaInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              资质
            </template>
            {{ this.teaInfo.title }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ this.teaInfo.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              居住地
            </template>
            {{ this.teaInfo.nativeplace }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              学校
            </template>
            <el-tag size="small">{{ this.teaInfo.schoolName }}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              所属院系
            </template>
            {{ this.teaInfo.collegeName }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>

    <el-dialog title="教师详细信息" :visible.sync="dialogVisible_1" width="30%">
      <el-descriptions
        v-if="dialogVisible_1"
        class="margin-top"
        :column="3"
        :size="size"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            照片
          </template>
          <el-image
            style="width: 100px; height: 100px"
            :src="teaInfo.photo"
            fit="fit"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            教师姓名
          </template>
          {{ this.teaInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            资质
          </template>
          {{ this.teaInfo.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ this.teaInfo.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            居住地
          </template>
          {{ this.teaInfo.nativeplace }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            学校
          </template>
          <el-tag size="small">{{ this.teaInfo.schoolName }}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            所属院系
          </template>
          {{ this.teaInfo.collegeName }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import {
  get_course_info,
  stu_selection,
  stu_withdraw,
  get_stu_course
} from "@/api/releasecourse/course";
import util from "@/libs/util.js";
export default {
  data() {
    return {
      loading: false,
      dialogVisible_1: false,
      dialogVisible: null,
      type: 0,
      endtime: "",
      day: "01",
      hour: "01",
      minute: "23",
      second: "34",
      btn_disabled: false,
      btn_text: "选课",
      timedate: "",
      timer: null,
      millisecond: 0,
      tableData: []
    };
  },

  mounted() {
    //定时器
  },
  methods: {
    get_course_info1() {
      get_course_info().then(res => {
        if (res.statusCode == 100) {
          this.timedate = res.message.replace("T", " ");
          util.cookies.set("course", 1);
          this.timer = setInterval(() => {
            this.countDown();
          }, 10);
          this.dialogVisible = true;
        } else if (res.statusCode == 200) {
          this.tableData = res.data;
          this.type = 1;

          this.get_stu_course();
          this.dialogVisible = false;
        } else {
          this.$message.warning(res.message);
          this.type = 2;
          util.cookies.set("course", 0);
          this.dialogVisible = true;
        }

        console.log(this.timedate);
      });
    },
    countDown() {
      var timedate = new Date(Date.parse(this.timedate.replace(/-/g, "/"))); //自定义结束时间
      var now = new Date(); //获取当前时间
      var date = (timedate.getTime() - now.getTime()) / 1000 + 4; //获取相差的秒数
      //获取相差毫秒数

      var day = Math.floor(date / (60 * 60 * 24));
      var _hour = date - day * 60 * 60 * 24;
      var hour = Math.floor(_hour / (60 * 60));
      var _minute = _hour - hour * 60 * 60;
      var minute = Math.floor(_minute / 60);
      var _second = _minute - minute * 60;
      var second = Math.floor(_second);
      var millisecond = Math.floor(
        (date - day * 60 * 60 * 24 - hour * 60 * 60 - minute * 60 - second) *
          1000
      );

      function toDou(n) {
        if (n < 10) {
          return "0" + n;
        } else {
          return "" + n;
        }
      } //一位数的数字前面加0

      if (date >= 0) {
        this.day = toDou(day);
        this.hour = toDou(hour);
        this.minute = toDou(minute);
        this.second = toDou(second);
        this.millisecond = toDou(millisecond);
      } else {
        clearInterval(this.timer);
        this.timer = null;

        console.log("选课已结束");

        // this.get_course_info1();

        get_course_info().then(res => {
          this.tableData = res.data;
          this.get_stu_course();
        });

        this.dialogVisible = false;

        //发送数据到另一页面
      }
    },
    seletion() {
      //跳转到选课页面
      if (this.timer) {
        //消息提示
        this.$message({
          message: "选课未开始，请勿重复点击",
          type: "warning"
        });
      } else {
        this.dialogVisible = false;
        // this.$router.push({
        //   path: "/stu_selection_list",

        //   query: {
        //     course_list: JSON.stringify(this.tableData)
        //     // endtime:this.tableData[0].endTime.replace("T"," ")
        //   }
        // });
      }
    },
    //退课
    tui(randomCode) {
      //提示用户是否确认选课
      this.$confirm("确认退课吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          stu_withdraw({ randomCode: randomCode }).then(res => {
            if (res.statusCode == 200) {
              this.$message({
                type: "success",
                message: res.message
              });

              this.get_course_info1();
              this.get_stu_course();
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退课"
          });
        });
    },
    //获取已选课程
    get_stu_course() {
      get_stu_course().then(res => {
        let yuxiuan = res.data;
        console.log(res);
        console.log(yuxiuan);
        this.tableData.forEach((item, index) => {
          this.$set(item, "is_select", true);

          yuxiuan.forEach((item2, index2) => {
            if (item.courseAndTeacherMsg.courseId == item2.courseId) {
              //添加属性
              this.$set(item, "is_select", false);
              // item.is_select = true;

              // this.tableData[index].is_qian = true;
            }
          });
          console.log(item);
        });
      });
    },
    push(val) {
      //提示用户是否确认选课
      this.$confirm("确认选课吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          stu_selection({ randomCode: val }).then(res => {
            if (res.statusCode == 200) {
              this.get_course_info1();
              this.get_stu_course();
              this.$message({
                type: "success",
                message: res.message
              });
              this.get_stu_course();
            } else {
              this.get_course_info1();
              this.get_stu_course();
              this.$message({
                type: "error",
                message: res.message
              });
            }
             this.loading = false;
          });
         
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消选课"
          });
        });
    },
    teainfo(e) {
      this.dialogVisible_1 = true;
    },

    countDown_end() {
      console.log(this.time);
      var timedate = new Date(Date.parse(this.time.replace(/-/g, "/"))); //自定义结束时间
      var now = new Date(); //获取当前时间
      var date = (timedate.getTime() - now.getTime()) / 1000; //获取相差的秒数
      console.log(date);
      if (date < 0) {
        clearInterval(this.timer);
        this.timer = null;
        console.log("选课已结束");

        //跳转到选课结束页面
        this.get_course_info1();
        //删除头部菜单

        //发送数据到另一页面
      }
    }
  },
  created() {
    this.get_course_info1();
  }
};
</script>

<style>
.countdown {
  width: 500px;
  margin: 50px auto;
  text-align: center;
}
#endtime {
  padding: 5px;
  width: 200px;
  font-size: 12px;
}
.countdown-content {
  height: 50px;
  line-height: 50px;
}
.countdown-content span {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: #ebf1f6;
  box-shadow: 5px 5px 10px #d1d6db, -5px -5px 10px #ffffff;
  color: rgb(255, 0, 0);
  font-size: 24px;
}
.btn {
  display: block;
  padding: 10px 30px;
  margin: 20px auto;
  outline: none;
  border: none;
  background: #ff2626;
  font-size: 16px;
  font-weight: bold;
  color: rgb(20, 18, 18);
  cursor: pointer;
}
a {
  text-decoration: none;
}
.btn:hover {
  background: #ff4d4d;
}
.btn-disabled {
  cursor: default;
  pointer-events: none;
  background: #ccc;
}
.btn-5 {
  width: 130px;
  height: 40px;
  line-height: 20px;
  padding: 0;
  border: none;
  background: rgb(255, 27, 0);
  background: linear-gradient(
    0deg,
    rgba(255, 27, 0, 1) 0%,
    rgba(251, 75, 2, 1) 100%
  );
}
.btn-5:hover {
  color: #f0094a;
  background: transparent;
  box-shadow: none;
}
.btn-5:before,
.btn-5:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: #f0094a;
  box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003,
    4px 4px 5px 0px #0002;
  transition: 400ms ease all;
}
.btn-5:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}
.btn-5:hover:before,
.btn-5:hover:after {
  width: 100%;
  transition: 800ms ease all;
}
.custom-btn {
  width: 130px;
  height: 40px;
  color: rgb(27, 25, 25);
  margin-top: 30px;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;

  text-align: center;
}
</style>
